<script setup lang="ts">
import { Moon, SunnyOutline } from "@vicons/ionicons5";
import { useDesignSetting } from "@/store/modules/designSetting.ts";

const designStore = useDesignSetting();
function handleChangeTheme() {
  designStore.changeMainTheme();
}

const mainTheme = ref(null);
watchEffect(() => {
  mainTheme.value = designStore.darkTheme;
});
</script>

<template>
  <div class="mr-5 flex items-center">
    <n-icon size="22" class="cursor-pointer" @click="handleChangeTheme">
      <SunnyOutline v-if="mainTheme" />
      <Moon v-else />
    </n-icon>
  </div>
</template>
